<template>
	<el-container class="mainbox">
		<el-header>
			<div class="logo">荣朗出国CRM</div>
			<el-dropdown @command="handleCommand">
				<div class="avatarSetting">
					<span class="avatarName">{{ name }}</span>
					<el-icon class="el-icon--right avatarArrowIcon">
						<arrow-down />
					</el-icon>
				</div>
				<template #dropdown>
					<el-dropdown-menu>
						<el-dropdown-item command="logout">退出登录</el-dropdown-item>
					</el-dropdown-menu>
				</template>
			</el-dropdown>
		</el-header>
		<el-container>
			<el-aside class="asideboard">
				<el-menu :default-active="defaultPath" :default-openeds="['/device']" router active-text-color="#222"
					background-color="#3D3C3C" text-color="#fff">
					<template v-for="(item, idx) in menus" :key="idx">
						<el-sub-menu v-if="item.submenus" :index="item.to">
							<template #title>
								<!-- <el-icon :class="item.class">
                  <component :is="item.icon" />
                </el-icon> -->
								{{ item.title }}
							</template>
							<el-menu-item-group v-if="item.submenus">
								<el-menu-item v-for="subItem in item.submenus" :key="subItem.index" :index="subItem.to">
									<!-- <el-icon :class="subItem.class"></el-icon> -->
									{{ subItem.title }}
								</el-menu-item>
							</el-menu-item-group>
						</el-sub-menu>
						<el-menu-item v-else :index="item.to">
							<template #title>
								<!-- <el-icon :class="item.class">
                  <component :is="item.icon" />
                </el-icon> -->
								{{ item.title }}
							</template>
						</el-menu-item>
					</template>
				</el-menu>
			</el-aside>
			<div v-show="isShow" class="back-to-top" @click="backToTop">
				<i class="el-icon-caret-top"></i>
			</div>
			<el-main id="main">
				<router-view />
			</el-main>
		</el-container>
	</el-container>
</template>

<script>
import { toRefs, reactive, watch, onMounted } from "vue"
import { useRouter, useRoute } from "vue-router"
import watermark from "../common/watermark"
import ajax from "@/service/ajax"
import { useStore } from "vuex"

export default {
	setup() {
		const router = useRouter()
		const route = useRoute()
		const store = useStore()

		const state = reactive({
			menus: [
				{
					title: "客户管理",
					icon: "HomeFilled",
					to: "/custom",
					submenus: [
						{
							title: "客户列表",
							class: "el-icon-cpu",
							to: "/custom/index",
						},
						{
							title: "漏斗图",
							class: "el-icon-cpu",
							to: "/custom/chart",
						}
					]
				}
			],
			name: window.localStorage.getItem('login_username'),
			isShow: false,
		})

		const logout = () => {
			let redirect = location.href
			router.push({
				path: '/login',
				query: {
					redirect: encodeURIComponent(redirect)
				}
			})
		}

		const handleCommand = (command) => {
			if (command === "logout") {
				logout()
			}
		}

		
		const gotoPage = (page) => {
			router.push(page)
		}

		const getAdminInfo = () => {
			const data = {}
			ajax.getAdminInfo(data).then((rs) => {
				let userName = rs.data.loginName
				state.name = rs.data.realName
				store.dispatch("SAVE_USER_ME", rs.data)
				watermark.set(userName)
			})
		}

		watch(route, (n, o) => {
			console.log("router watch", n.path, o.path)
			state.defaultPath = n.path
		})

		onMounted(() => {
			window.addEventListener("scroll", handleScroll, true)
		})

		function handleScroll() {
			const scrollTop = document.getElementById("main").scrollTop
			state.isShow = scrollTop > 300
		}

		const backToTop = () => {
			let timer = setInterval(function () {
				// const scrollTop =  document.documentElement.scrollTop ||window.pageYOffset || document.body.scrollTop;
				const scrollTop = document.getElementById("main").scrollTop
				const ispeed = Math.floor(-scrollTop / 6)
				if (scrollTop === 0) {
					clearInterval(timer)
				}
				// document.documentElement.scrollTop = document.body.scrollTop = scrollTop + ispeed;
				document.getElementById("main").scrollTop = scrollTop + ispeed
			}, 30)
		}

		// 设置默认路径
		console.log("route = ", router, route)
		state.defaultPath = route.path

		// getAdminInfo()

		return {
			handleCommand,
			handleScroll,
			backToTop,
			logout,
			...toRefs(state),
		}
	},
}
</script>

<style lang="scss" scoped>
.el-header {
	color: var(--el-text-color-primary);
	line-height: 60px;
	padding: 0px;
	display: flex;
	justify-content: space-between;
	align-items: center;

	position: relative;
	box-sizing: border-box;
	width: 100%;
	height: 60px;
	font-size: 22px;
	color: #fff;
	background-color: #3d3c3c;
}

.el-aside {
	color: var(--el-text-color-primary);
	height: 100%;
	width: 180px;
	// background: #3d3c3c;
}

.el-menu {
	height: 100%;
}

.el-menu-item.is-active {
	background: #ebebef;
}

.mainbox {
	height: 100%;
}

.logo {
	float: left;
	margin-left: 15px;
	width: 250px;
	line-height: 60px;
}

.avatarSetting {
	display: flex;
	justify-content: center;
	align-items: center;
	height: 30px;
	padding: 0px 15px;
	float: right;
}

.avatarArrowIcon {
	margin: 2px;
	color: #fff;
}

.avatarName {
	height: 25px;
	line-height: 1.9;
	margin: 2px;
	color: #fff;
}

:deep(.el-input) {
	display: inline-block;
	width: 120px;
}

.back-to-top {
	position: fixed;
	right: 15px;
	bottom: 60px;
	width: 40px;
	height: 40px;
	display: block;
	background-color: white;
	border-radius: 50%;
	text-align: center;
	cursor: pointer;
	box-shadow: 0 0 6px rgba(0, 0, 0, 0.12);
	z-index: 1000;

	.el-icon-caret-top {
		color: gray;
		line-height: 40px;
		font-size: 20px;
	}
}

.el-menu {
	border-right: 0px;
}
</style>
